cropper {
    
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 101;
    
      padding-top: 44px;
      background-color: #000;
    
      .cropbox {
        width: 37.5rem;     // if no support vw, browser auto use this setting
        height: 37.5rem;    // if no support vw, browser auto use this setting
    
        width: 100vw;       // real setting
        height: 100vw;      // real setting
    
        margin: auto;
      }
    
      .cropper-point {
        width: 8px;
        height: 8px;
      }
      
      .cropper-line:before,
      .cropper-point:before {
        background-color: #39f;
        bottom: -75%;
        content: " ";
        display: block;
        height: 300%;
        opacity: 0;
        position: absolute;
        right: -75%;
        width: 300%;
      }
      .cropper-line.line-e:before { height: 100%; bottom: 0; }
      .cropper-line.line-n:before { width: 100%; right: 0; }
      .cropper-line.line-w:before { height: 100%; bottom: 0; }
      .cropper-line.line-s:before { width: 100%; right: 0; }
      
      .cropper-point.point-e {
        margin-top: -4px;
        right: -4px;
      }
      .cropper-point.point-n {
        margin-left: -4px;
        top: -4px;
      }
      .cropper-point.point-w {
        left: -4px;
        margin-top: -4px;
      }
      .cropper-point.point-s {
        bottom: -4px;
        margin-left: -4px;
      }
    
      .cropbox-tip {
        padding: 1.5rem 1rem;
        color: #999;
        font-size: 2rem;
        line-height: 1.4rem;
        text-align: center;
      }
    
      .operation {
        position: absolute;
        z-index: 3;
        bottom: 0;
    
        width: 100%;
        // text-align: center;
        margin-top: 3rem;
    
        button {
          display: inline-block;
          width: 6rem;
          height: 6rem;
          margin: auto 3rem;
          text-align: center;
          overflow: hidden;
          background-color: transparent;
          

          // color: transparent;
          color: #fff;
          text-shadow: none;
          background-color: transparent;
          border: 0;
    
          &:before {
            font-size: 2rem;
            color: #fff;
          }
        }
      }
    
      .cancel {
    
      }
    
      .confirm {
        float: right;
      }
    
      .aspect-ratios {
        display: table;
        width: 100%;
        margin: auto;
        padding: 1rem 3rem;
        color: #ccc;
        text-align: center;
        // background-color: #101010;
    
        // font-size: $font-size-bigger;
    
        .btn {
          display: table-cell;
          // width: 5rem;
          // height: 5rem;
          padding-left: 1.5rem;
          padding-right: 1.5rem;
          text-align: center;
          vertical-align: middle;
          // border: solid 1px #555;
        }
    
        .label {
          display: table-cell;
          height: 2rem;
          margin: auto;
          padding: 0 .5rem;
          text-align: center;
          vertical-align: middle;
          border: solid 1px #555252;
          // font-size: $font-size-smaller;
          border-radius: 4px;
          white-space: nowrap;
        }
    
        .aspectRatio0 .label {
          width: 4rem;
          height: 3rem;
          padding: 0;
          font-size: 1rem;
          border-style: dotted;
        }
    
        .aspectRatio1 .label {
          width: 3rem;
          height: 3rem;
        }
    
        .aspectRatio2 .label {
          width: 3rem;
          height: (3 / 1.3333333333333333) * 1rem;
        }
    
        .aspectRatio3 .label {
          width: (3 * (2 / 3)) * 1rem;
          height: 3rem;
        }
    
        .aspectRatio4 .label{
          width: 3.6rem;
          height: (3.6 / 1.7777777777777777) * 1rem;
        }
    
        .active {
          .label {
            color: #007aff;
            border-color: #007aff;
          }
        }
      }
    }
    